<template>
  <div class="rulelist-container">
    <div class="line-button">
      <div class="page-button">
        <div class="page-title">
          <div class="fks-title-icon" />
          <div class="title-text">{{ LANG.OBJ_LIST }}</div>
        </div>
        <div>
          <fks-select
            style="width: 300px"
            v-model="search.status"
            clearable
            @change="getObjList"
            :placeholder="LANG.STATUS"
          >
            <fks-option
              v-for="item in codeConfigStatus"
              :key="item.code"
              :label="item[$lang]"
              :value="item.code"
            ></fks-option>
          </fks-select>
          <fks-input
            v-model="search.objName"
            size
            style="width: auto; margin-left: 8px"
            :placeholder="LANG.OBJ_ENG_NAME"
            clearable
            maxlength="50"
            @keyup.native.enter="getObjList"
            @clear="getObjList"
          >
            <fks-button
              slot="append"
              icon="fks-icon-search"
              @click="getObjList"
            />
          </fks-input>
          <fks-input
            v-model="search.serviceNameParam"
            size
            style="width: auto; margin-left: 8px"
            :placeholder="LANG.MODEL"
            clearable
            maxlength="50"
            @keyup.native.enter="getObjList"
            @clear="getObjList"
          >
            <fks-button
              slot="append"
              icon="fks-icon-search"
              @click="getObjList"
            />
          </fks-input>
        </div>
      </div>
    </div>
    <fks-table :data="tableData" height="calc(100% - 65px)">
      <fks-table-column type="index" align="center" width="50" label="#" />
      <fks-table-column
        :label="LANG.OBJ_NAME"
        align="left"
        prop="objName"
      ></fks-table-column>
      <fks-table-column
        :label="LANG.OBJ_ENG_NAME"
        align="left"
        prop="objFullName"
        min-width="150"
      ></fks-table-column>
      <fks-table-column
        :label="LANG.MODEL"
        prop="serviceName"
      ></fks-table-column>
      <fks-table-column :label="LANG.CONFIG_STATUS">
        <template slot-scope="scope">
          <div>
            {{ scope.row.encodeModel ? LANG.CONFIGED : LANG.NOT_CONFIGED }}
          </div>
        </template>
      </fks-table-column>
      <fks-table-column :label="LANG.IS_ENABLED">
        <template slot-scope="scope" v-if="scope.row.encodeModel">
          <fks-switch
            v-model="scope.row.encodeModel.encodeEnable"
            :active-value="true"
            :inactive-value="false"
            @change="changeStatus(scope.row)"
            v-permission="['code:enable']"
          ></fks-switch>
        </template>
      </fks-table-column>
      <fks-table-column :label="LANG.ENABLED_TIME">
        <template slot-scope="scope">
          <div>
            {{ scope.row.encodeModel ? scope.row.encodeModel.activateAt : '' }}
          </div>
        </template>
      </fks-table-column>
      <fks-table-column :label="LANG.OPERATION" width="100">
        <template slot-scope="scope">
          <fks-button
            text
            v-if="scope.row.encodeModel && scope.row.encodeModel.encodeEnable"
            @click="viewConfig(scope.row)"
            >{{ LANG.VIEW }}</fks-button
          >
          <fks-button
            text
            v-if="!scope.row.encodeModel"
            @click="handleConfig(scope.row)"
            >{{ LANG.CONFIG }}</fks-button
          >
          <fks-button
            text
            v-if="scope.row.encodeModel && !scope.row.encodeModel.encodeEnable"
            @click="editConfig(scope.row)"
            >{{ LANG.EDIT }}</fks-button
          >
        </template>
      </fks-table-column>
    </fks-table>
    <rule-config
      v-if="ruleDialogVisible"
      :visible.sync="ruleDialogVisible"
      :ruleData="ruleData"
      :operateType="operateType"
      @closeRuleConfig="getObjList"
    ></rule-config>
  </div>
</template>
<script>
import { ENUM } from '@/store/State/stateTypes'
import { getObjList, changeStatus } from '../api'
import RuleConfig from '../RuleConfig'
export default {
  name: 'RuleList',
  components: {
    RuleConfig
  },
  data() {
    return {
      pageSize: 15,
      currentPage: 1,
      total: 0,
      search: {
        objName: '',
        serviceNameParam: '',
        status: ''
      },
      tableData: [],
      ruleData: {},
      ruleDialogVisible: false,
      type: 'add'
    }
  },
  computed: {
    codeConfigStatus() {
      return this.$store.state[ENUM].codeConfigStatus || []
    }
  },
  mounted() {
    this.getObjList()
  },
  methods: {
    getObjList() {
      getObjList(this.search)
        .then((res) => {
          if (res.status) {
            this.tableData = res.data
            this.total = res.data.totalElements
          }
        })
        .catch((err) => {})
    },
    changeStatus(row) {
      let params = {
        modelId: row.objFullName,
        encodeEnable: row.encodeModel.encodeEnable
      }
      changeStatus(params)
        .then((res) => {
          if (res.status) {
            if (params.encodeEnable) {
              this.$message.success(this.LANG.ENABLE_SUCCESS)
            }
            this.getObjList()
          }
        })
        .catch((err) => {})
    },
    handleConfig(row) {
      this.operateType = 'add'
      this.ruleData = row
      this.ruleDialogVisible = true
    },
    editConfig(row) {
      this.operateType = 'edit'
      this.ruleData = row
      this.ruleDialogVisible = true
    },
    viewConfig(row) {
      this.operateType = 'view'
      this.ruleData = row
      this.ruleDialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.rulelist-container {
  height: 100%;
  padding-top: 24px;
  .page-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .page-title {
    display: flex;
    .title-text {
      font-weight: bold;
      font-size: 16px;
      color: #191919;
    }
  }
  .line-button {
    margin-bottom: 24px;
  }
}
</style>